<template>
    <view class="title-container">

        <template v-if="!isJsonTitle">
            <text>{{ contents }}</text>
        </template>

        <!-- JSON格式题目（支持文本和图片混排） -->
        <template v-else>
            <view v-for="(item, index) in parsedTitle" :key="index" class="title-item">
                <text v-if="item.type == 'text'">{{ item.content }}</text>
                <image v-else-if="item.type == 'image'" class="title-image" 
                v-for="value in getImageUrl(item.content)"
                :src="value"
                :key="value"
                mode="aspectFill" @click="previewImage(item.content)"></image>
            </view>
        </template>
    </view>
</template>
<script>
export default {
    props: {
        contents: {
            type: [String, Object],
            required: true
        }
    },
    computed: {
        // 直接当做普通属性调用不加括号
        // 任何data中数据变化立即重新计算
        // 计算属性会缓存
        isJsonTitle() {
            if (Array.isArray(this.contents)) {
                return this.contents.length > 0;
            } else if (!this.contents) return false;
            try {
                // 尝试解析JSON
                const parsed = JSON.parse(this.contents);
                return Array.isArray(parsed) && parsed.length > 0;
            } catch (e) {
                return false;
            }
        },
        // 解析JSON格式的题目标题
        parsedTitle() {
            if (Array.isArray(this.contents) && this.contents.length > 0) {
                return this.contents;
            }
            if (!this.isJsonTitle) return [];
            try {
                return JSON.parse(this.contents);
            } catch (e) {
                return [];
            }
        },
    },
    methods: {
        getImageUrl(imageId) {
            // 如果imageId是完整的HTTP URL，直接返回
            if (Array.isArray(imageId)) {
                return imageId;
            }
            // 否则使用项目配置中的baseUrl，去掉端口号
            const baseUrlWithoutPort = this.$config.baseUrl.replace(/:\d+/, '');
            return [baseUrlWithoutPort + '/image/' + imageId];
        },
        previewImage(imageId) {
            const imageUrl = this.getImageUrl(imageId);
            // 获取所有图片URL用于预览
            let imageUrls = [];
            if (this.isJsonTitle && this.parsedTitle) {
                imageUrls = this.parsedTitle
                    .filter(item => item.type === 'image')
                    .map(item => this.getImageUrl(item.content));
            } else {
                imageUrls = [imageUrl];
            }
            // 使用uni-app的预览图片API
            uni.previewImage({
                urls: imageUrls,
                current: imageUrl
            });
        },
    },
    mounted() {
        console.log(this.contents);

    }
}
</script>

<style>
.title-item {
    display: inline-block;
    margin-right: 10rpx;
    flex-wrap: wrap;
    position: relative;
}

.title-image {
    position: relative;
}

.title-container {
    font-size: 32rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 40rpx;
}
</style>